<template>
	<com-tag
	:lines="cellTitleLines"
	:radius="cellBorderRadius"
	:color="titleColor"
	:bg-color="cellBackgroundColor" :value="item.title" :plain="enablePlain" @click="handleTap"></com-tag>
</template>

<script>
	export default {
		inject: ['getSkinColor', 'navigate'],
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			titleColor () {
				return this.skinColor.color_1
			},
			textColor () {
				return this.skinColor.color_3
			},
			subtextColor () {
				return this.skinColor.color_5
			},
			cellTitleLines () {
				return this.options.cellTitleLines || 1
			},
			cellTitleSize () {
				return this.options.cellTitleSize || 24
			},
			enablePlain () {
				return this.options.enablePlain || false
			},
			cellBorderRadius () {
				return this.options.cellBorderRadius || 10
			},
			cellBackgroundColor () {
				return this.options.cellBackgroundColor || this.skinColor.color_gap_1
			}
		},
		methods: {
			handleTap () {
				this.navigate(this.item.url)
			}
		}
	}
</script>

<style>
</style>